<template>
    <div class="homeContent">
        <div class="myInfo">
            <div class="left">
                <div class="img">
                    <van-image width="100" height="100" :src="info.imgBase64" />
                </div>
            </div>
            <div class="right">
                <div class="name">{{ info.nikeName }}</div>
                <div class="bottom">
                    <div class="info">
                        <div class="account">账户：{{ info.account }}</div>
                        <div class="days">{{ info.remark }}</div>
                    </div>
                    <div class="edit">
                        <van-icon name="edit" @click="showDialog = true" />
                    </div>
                </div>
            </div>
        </div>
        <van-dialog class="userDialog" v-model="showDialog" title="个人信息" show-cancel-button @confirm="handleUser">
            <van-uploader :after-read="afterRead"
            :max-size="1024 * 1024" @oversize="onOversize" 
            
            />
            <img class="userImg" ref="imgRef" alt="">
            <van-field v-model="userName" label="姓名" />
        </van-dialog>

        <van-dialog class="passwordDialog" v-model="pwdShowDialog" title="更改密码" show-cancel-button @confirm="handlePwd"
            @cancel="handleCancel">
            <van-field v-model="oldPassword" type="password" label="原密码" />
            <van-field v-model="newPassword" type="password" label="新密码" />
        </van-dialog>
        <div class="itemList">
            <!-- <div class="item">
                <van-icon name="bell" />
                <div class="text">消息中心</div>
                <van-icon name="arrow" />
            </div> -->
            <div class="item" @click="handleAccount">
                <van-icon name="vip-card" />
                <div class="text">账户管理</div>
                <van-icon name="arrow" />
            </div>
            <div class="item" @click="handleLogout">
                <van-icon name="guide-o" />
                <div class="text">账户登出</div>
                <van-icon name="arrow" />
            </div>
            <!-- <div class="item" @click="pwdShowDialog = true">
                <van-icon name="guide-o" />
                <div class="text">修改密码</div>
                <van-icon name="arrow" />
            </div> -->
        </div>
        <div class="bottomInfo">
            <van-tabbar v-model="active">
                <van-tabbar-item icon="home-o" @click="handleRoute('home')">主页</van-tabbar-item>
                <van-tabbar-item icon="search" @click="handleRoute('accounting')">记账</van-tabbar-item>
                <van-tabbar-item icon="friends-o" @click="handleRoute('my')">我的</van-tabbar-item>
            </van-tabbar>
        </div>
    </div>
</template>

<script>
import { Dialog } from 'vant';
import { Notify,Toast  } from 'vant';
import { getHomeInfo, editUser } from "@/api/my.js"
export default {
    data() {
        return {
            info: {},
            base64String: '',
            oldPassword: '',
            newPassword: '',
            active: 2,
            showDialog: false,
            pwdShowDialog: false,
            userName: "",
        }
    },
    created() {
        this.getHomeInfo()
    },
    methods: {
        onOversize(){
            Toast('文件大小不能超过 1MB');
        },
        async handleUser() {
            let data = {
                imgBase64: this.base64String,
                nikeName: this.userName,
            }
            const res = await editUser(data)
            console.log(res, 'qqq');
            if (res.code == 200) {
                Notify({ type: 'success', message: '修改成功' });
            }
            this.base64String = ''
            this.nickName = ''
            this.getHomeInfo()
        },
        async getHomeInfo() {
            const res = await getHomeInfo()
            console.log(res, 'xxx');
            this.info = res.data
            this.userName = res.data.nikeName
        },
        handleCancel() {
            this.oldPassword = ''
            this.newPassword = ''

        },
        handlePwd() {
            if (this.oldPassword == '') {
                Notify({ type: 'warning', message: '请输入原密码' });
                return
            } else if (this.newPassword == '') {
                Notify({ type: 'warning', message: '请输入新密码' });
                return
            }

        },
        afterRead(file) {
            console.log(file, 'file');
            const reader = new FileReader();
            console.log(this.$refs);
            const _this = this
            reader.onload = function (e) {
                // 获取Base64编码
                const base64String = e.target.result;
                _this.base64String = base64String;
                // console.log(base64String);  // 输出Base64编码
                // 设置图片预览
                _this.$refs.imgRef.src = base64String;
            };

            // 读取文件为Data URL (Base64格式)
            reader.readAsDataURL(file.file);
        },
        handleRoute(path) {
            this.$router.push('/' + path)
        },
        handleAccount() {
            this.$router.push('/accountManage')
        },
        handleLogout() {
            Dialog.confirm({
                title: '提示',
                message: '是否确定登出？',
            })
                .then(() => {
                    this.$router.push('/login')
                })
                .catch(() => {
                    // on cancel
                });
        }
    }
};
</script>

<style lang="less" scoped>
.homeContent {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px;
    color: #fff;

    .myInfo {
        border-radius: 10px;
        background-color: #007aff;
        display: flex;
        padding: 20px;

        .left {
            width: 100px;
            height: 100px;
            border-radius: 8px;
            margin-right: 20px;

            ::v-deep {
                .van-image__img {
                    border-radius: 50%;
                }
            }


        }

        .right {
            display: flex;
            flex-direction: column;

            .name {
                font-size: 22px;
                font-weight: 700;
                margin-bottom: 10px;
            }

            .bottom {
                display: flex;
                justify-content: space-between;

                .info {
                    display: flex;
                    flex-direction: column;

                    .account {
                        margin-bottom: 5px;
                    }
                }

                .edit {
                    margin-left: 8px;

                    .van-icon-edit {
                        font-size: 40px;
                    }
                }
            }
        }
    }

    .userDialog {
        .userImg {
            width: 100px;
            height: 100px;
        }
    }

    .itemList {
        margin-top: 25px;
        background-color: #f2f2f2;
        display: flex;
        flex-direction: column;
        color: #333;
        border-radius: 15px;

        .item {
            display: flex;
            align-items: center;

            padding: 10px;

            .van-icon-bell,
            .van-icon-vip-card,
            .van-icon-guide-o {
                font-size: 30px;
                margin-right: 10px;
            }

            .van-icon-arrow {
                margin-left: auto;
            }
        }
    }

}
</style>